<?php
    require '../check/check.php';
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
    <link rel="stylesheet" href="../plugins/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="../css/global.css" media="all">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/table.css"/>
    <script type="text/javascript" src="../../js/jquery-3.2.0.min.js"></script>
</head>
<body>
<div class="admin-main">
    <blockquote class="layui-elem-quote" style="height: 30px;">
        <div class="layui-input-inline" style="float:right;">
            <a href="#" class="layui-btn layui-btn-small" id="search">
                <i class="layui-icon">&#xe615;</i> 搜索
            </a>
        </div>
    </blockquote>
    <fieldset class="layui-elem-field">
        <legend>用户列表</legend>
    <div class="layui-field-box">
        <table class="site-table table-hover">
            <thead>
            <tr>
                <th style="text-align: center">姓名
                </th>
                <th style="text-align: center">性别
                </th>
                <th style="text-align: center">出生日期</th>
                <th style="text-align: center">身份证</th>
                <th style="text-align: center">联系电话</th>
                <th style="text-align: center">电子邮箱</th>
                <th style="text-align: center">注册日期</th>
                <th style="text-align: center">用户状态</th>
                <th style="text-align: center">操作</th>
            </tr>
            </thead>
            <tbody id="content">
            </tbody>
        </table>
    </div>
    </fieldset>
    <div class="admin-table-page">
        <div id="paged" class="page">
        </div>
    </div>
</div>

<!--模板-->
<script type="text/html" id="tpl">
    {{# layui.each(d.list, function(index, item){ }}
    <tr>
        <td>{{ item.username }}</td>
        <td>{{ item.usersex }}</td>
        <td>{{ item.userbirth }}</td>
        <td>{{ item.usercard }}</td>
        <td>{{ item.usertel }}</td>
        <td>{{ item.useremail }}</td>
        <td>{{ item.registerdate }}</td>
        <td>{{ item.statustext }}</td>
        <td>
            <a href="javascript:;" data-name="{{ item.id }}" data-opt="retpass"
               class="layui-btn layui-btn-mini">重置密码</a>
            <a href="javascript:;" data-name="{{ item.id }}" data-value="{{ item.userstatus }}" data-opt="retstatus"
               class="layui-btn layui-btn-danger layui-btn-mini">启停用户</a>
        </td>
    </tr>
    {{# }); }}
</script>

<script type="text/javascript" src="../plugins/layui/layui.js"></script>
<script>
    $(function () {
        getUserList('','','');
    });

    function getUserList(username,usersex,usertel) {
        layui.config({
            base: '../js/'
        });
        layui.use(['paging', 'form'], function () {
            var $ = layui.jquery,
                paging = layui.paging(),
                layerTips = parent.layer === undefined ? layui.layer : parent.layer, //获取父窗口的layer对象
                layer = layui.layer, //获取当前窗口的layer对象
                form = layui.form();

            paging.init({
                url: 'user.php', //地址
                elem: '#content', //内容容器
                params: { //发送到服务端的参数
                    method: 'getUserListByPage',
                    username:username,
                    usersex:usersex,
                    usertel:usertel
                },
                type: 'post',
                tempElem: '#tpl', //模块容器
                pageConfig: { //分页参数配置
                    elem: '#paged' //分页容器
//                  pageSize: 3 //使用paging.js配置的默认值15
                },
                success: function () { //渲染成功的回调
                },
                fail: function (msg) { //获取数据失败的回调
                },
                complate: function () { //完成的回调
                    //绑定按钮事件
                    $('#content').children('tr').each(function (data) {
                        var $that = $(this);
                        $that.children('td:last-child').children('a[data-opt=retpass]').on('click', function () {
                            $.ajax({
                                url: 'user/user.php',
                                type: "post",
                                dataType: "json",
                                data: 'method=resetPassword&id=' + $(this).data('name'),
                                success: function (result) {
                                    layer.msg(result.msg, {time: 800});
                                }, error: function () {
                                }
                            });
                        });

                        $that.children('td:last-child').children('a[data-opt=retstatus]').on('click', function () {
                            $.ajax({
                                url: 'user/user.php',
                                type: "post",
                                dataType: "json",
                                data: 'method=modifyStatus&id=' + $(this).data('name') + '&userstatus=' + $(this).data('value'),
                                success: function (result) {
                                    layer.msg(result.msg, {time: 800}, function(){
                                        //操作完成后通过js直接修改当前表格行的数据值（不建议重新刷新整个页面）
                                        $that.children('td:last-child').children('a[data-opt=retstatus]').data('value', result.userstatus);
                                        $that.children('td:last-child').prev().text(result.userstatustext);
                                    });
                                }, error: function () {
                                }
                            });
                        });
                    });
                },
            });


        });


    }

    var searchBoxIndex = -1;
    $('#search').on('click', function() {
        if(searchBoxIndex != -1)
            return;
        //通过ajax加载页面
        $.get('template/user_search.html', null, function(form) {
            searchBoxIndex = layer.open({
                type: 1,
                title: '搜索条件',
                content: form,
                btn: ['搜索', '取消'],
                shade: false,
                offset: ['100px', '30%'],
                area: ['600px', '320px'],
                zIndex: 19950924,
                maxmin: true,
                yes: function(index) {
                    //触发表单的提交事件
                    $('form.layui-form').find('button[lay-filter=search]').click();
                },
                full: function(elem) {
                    var win = window.top === window.self ? window : parent.window;
                    $(win).on('resize', function() {
                        var $this = $(this);
                        elem.width($this.width()).height($this.height()).css({
                            top: 0,
                            left: 0
                        });
                        elem.children('div.layui-layer-content').height($this.height() - 95);
                    });
                },
                success: function(layero, index) {
                    //弹出窗口成功后渲染表单
                    var form = layui.form();
                    form.render();
                    form.on('submit(search)', function(data) {
//                      console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
                        if (data.field.usersex == -1){
                            data.field.usersex = "";
                        }else if (data.field.usersex == 0){
                            data.field.usersex = "男";
                        }else{
                            data.field.usersex ="女";
                        }
                        getUserList($.trim(data.field.username),$.trim(data.field.usersex),$.trim(data.field.usertel));
                        layer.closeAll();
//                        location.reload();//刷新
                        //这里可以写ajax方法提交表单
                        return false; //阻止表单跳转。
                    });
                },
                end: function() {
                    searchBoxIndex = -1;
                }
            });
        });
    });
</script>
</body>

</html>